<template>
  <div>
    <headerXX :name="title"></headerXX>
    <van-notice-bar
      left-icon="volume-o"
      text="请到共享驿站智能工具柜自助领用工具"
    />
    <div style="height: 10px"></div>
    <van-pull-refresh
      class="pull-refresh_Search"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-empty
        v-if="goodList.length == 0 && !error"
        image="search"
        description="未找到数据"
      />
      <van-empty v-if="error" image="error" description="网络错误" />
      <van-list
        :immediate-check="false"
        v-model:loading="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了"
        @load="queryList"
      >
        <div class="cleaning_top_list">
          <div class="wupin_list_time">
            <div class="wupin_list_title">
              <div v-for="(item, index) in goodList" :key="index">
                <div class="wupin_title_image">
                  <div class="wupin_image">
                    <van-image class="image" :src="item.goodImage" mode="" />
                  </div>
                  <div class="wupin_title_list">
                    <div class="wupin_title">
                      <div class="title_name">{{ item.goodName }}</div>
                      <div class="title_remark_list">单位：{{ item.unit }}</div>
                      <div class="title_stock" style="margin-top: 2px">
                        <div style="display: flex; align-items: center">
                          <div style="margin-right: 25px">
                            总：{{ item.goodSumQty }}
                          </div>
                          <div class="">余：{{ item.goodRemainQty }}</div>
                        </div>
                      </div>
                    </div>
                    <van-tag
                      round
                      v-if="item.goodRemainQty > 0 && item.goodSumQty > 0"
                      type="success"
                      size="large"
                      >可借</van-tag
                    >
                    <van-tag round v-else type="danger" size="large"
                      >暂无</van-tag
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <template #error>
          <div class="error-tip" @click="retryLoad">
            <van-icon name="warning" />
            <span>加载失败，点击重试</span>
          </div>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { testUserMessage } from "../../common/testUser.js";
import headerXX from "../../components/title.vue";
import dateCycle from "../../common/timeCycle/timeCycle.js";
import moment from "moment";
import { getToolList } from "@/api/realAssets/icsharedstation/JBJJ_JKZC_GXGJ_SHFS/index.js";
export default {
  components: { headerXX },
  data() {
    return {
      title: "共享工具",
      siteData: JSON.parse(localStorage.getItem("siteData")),
      clentHeight: 0,
      serviceID: 0,
      groupAction: 0,
      pages: 0,
      toolsNum: 0,
      dateNumValue: 0,
      minDateTime: 0,
      maxDateTime: 0,
      deviceID: "",
      returnTime: "",
      returnDateTime: Number(new Date()),
      wupinPgInfo: {},
      show: false,
      list: [],
      goodList: [],
      toolsArray: [],
      pageData: {
        pageNumber: 1,
        pageSize: 10,
      },
      finished: false,
      error: false,
      loading: false,
      refreshing: false,
    };
  },
  created() {},
  mounted() {
    testUserMessage("共享工具").then((siteData) => {
      this.siteData = siteData[0];
      this.queryList();
    });
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      this.pageData.pageNumber = 1;
      this.pageData.pageSize = 10;
      this.finished = false;
      this.error = false;
      this.loading = true;
      this.refreshing = true;
      this.queryList();
    },
    retryLoad() {
      this.error = false;
      this.loading = true;
      this.queryList();
    },
    queryList() {
      this.loading = true;
      let datalist = [];
      if (this.error) return; // 如果当前是错误状态，不自动触发加载
      if (this.refreshing) {
        this.list = [];
      }
      getToolList({
        siteId: this.siteData.id,
        pageNumber: this.pageData.pageNumber,
        pageSize: this.pageData.pageSize,
      }).then((res) => {
        if (res.resultMessage != "SUCCESS") {
          this.list = [];
          this.error = true; // 显示错误提示
        } else if (res.data.length == 0) {
          this.list = [];
          this.finished = true;
        } else {
          let datalist = res.data.map((item) => {
            return {
              goodId: item.goodId,
              goodName: item.toolName,
              goodImage: item.toolImage,
              goodPrice: item.goodPrice || 0,
              goodQty: 0,
              goodSiteId: item.siteId,
              goodSumQty: item.toolSum,
              goodRemainQty: item.toolRemain,
              goodSpecifications: item.toolSpecification,
              unit: item.unit,
            };
          });

          this.goodList = [...this.goodList, ...datalist];
        }

        this.loading = false;
        // 判断是否已加载完所有数据
        if (this.list.length == res.pageNum) {
          this.finished = true;
        } else {
          this.pageData.pageNumber++;
        }
        this.refreshing = false;
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../static/css/index.less";
@import "../../static/css/GYcSS.less";
.pull-refresh {
  background: #ffffff;
}
.cleaning_top_list {
  .cleaning_top {
    color: #ffffff;
    padding: 2px 10px 8px;
    display: flex;
    justify-content: center;
    align-items: center;

    .cleaning_item_name {
      color: #027571;
      background: #f5f5f5;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 20px;
      font-size: 8px;
      border-radius: 4px;

      &:nth-child(1) {
        margin-right: 8px;
      }
    }

    .item_action {
      background: #d3ebea;
      border: 1px solid #147f7b;
      font-weight: 500;
    }

    .item_action1 {
      color: black;
      background: #f5f5f5;
      font-weight: 500;
    }
  }
}

.wupin_list_time {
  padding: 0 8px;

  .wupin_list_title {
    .wupin_title_image {
      background: #ffffff;
      display: flex;
      justify-content: space-around;
      border-radius: 2px;
      height: 100px;
      margin-bottom: 10px;
    }

    .wupin_image {
      height: 100%;

      .image {
        width: 100px;
        height: 100%;
        border-radius: 3px 0 0 3px;
      }
    }

    .wupin_title_list {
      width: 100%;
      height: 100%;
      background-color: #f5f5f5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 5px;
      .wupin_title {
        margin-right: 3px;
        width: 78%;

        .title_name {
          font-weight: 700;
          // @include hidden-webkit(1);
          font-size: 16px;
          margin-bottom: 3px;
        }

        .title_remark_list {
          // @include hidden-webkit(2);
          font-size: 14px;
        }
        .title_stock {
          font-size: 14px;
        }
      }

      .minus_addkey_image {
        display: flex;
        justify-content: space-around;
        align-items: center;
        // @include fron-display(flex, space-between, center);
        width: 80px;

        .minus_image {
          width: 9px;
          height: 9px;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .stock_number {
          // margin-top: 14rpx;
          font-weight: bold;
          font-size: 8px;
        }

        .addkey_image {
          width: 9px;
          height: 9px;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.wupin_time_title {
  color: #ffffff;
  margin: 0px 5px;
  display: flex;
  justify-content: center;
  font-size: 8px;
  padding-top: 2px;

  .tools_image {
    margin-right: 3px;
    height: 100%;
    display: flex;
    justify-content: center;
    width: 10px;

    image {
      width: 100%;
      height: 9px;
    }
  }

  .wupin_t {
    display: flex;
    align-items: center;
    width: 100%;
    color: #027571;
  }

  .wupin_title_1 {
    font-weight: 700;
    color: black;
  }

  .time_title {
    width: 49%;
  }
}

.cleaning_bottom_list {
  // background: #027571;

  // bottom: 0;
  padding: 0 3px 8px;
  font-size: 8px;
  bottom: 0;

  .cleaning_bottom {
    background: #027571;
    color: #ffffff;
    height: 22px;
    border-radius: 2px;
    margin-top: 8px;
    @include fron-display(flex, center, center);

    // @include respond-to('phone') {

    // }

    // @include respond-to('android') {
    // 		height: 140px;
    // 		border-radius: 8px;
    // 		margin-top: 60rpx;
    // }
  }
}

::v-deep.uv-popup__content {
  .uv-toolbar {
    height: 20px;
    .uv-toolbar__wrapper__cancel {
      font-size: 8px;
    }

    .uv-toolbar__wrapper__confirm {
      font-size: 8px;
    }
  }

  .uv-picker__view {
    .uv-picker__view__column__item {
      font-size: 8px;
    }
  }
}
</style>